<template>
  <div class="container" ref="containerRef"></div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { Graph } from "@antv/x6";
import { DagreLayout } from "@antv/layout";

let graph;
const containerRef = ref();

/**
 * 初始化节点树结构数据与边数据
 */
const data: any = {
  nodes: [],
  edges: [],
};

for (let i = 1; i <= 12; i++) {
  data.nodes.push({
    id: i + "",
    shape: "rect",
    width: 60,
    height: 30,
    label: i,
    attrs: {
      body: {
        fill: "#855af2",
        stroke: "transparent",
      },
      label: {
        fill: "#ffffff",
      },
    },
  });
}
data.edges.push(
  ...[
    {
      source: "1",
      target: "2",
      attrs: {
        line: {
          stroke: "#fd6d6f",
          strokeWidth: 1,
        },
      },
    },
    {
      source: "2",
      target: "3",
      attrs: {
        line: {
          stroke: "#fd6d6f",
          strokeWidth: 1,
        },
      },
    },
    {
      source: "2",
      target: "4",
      attrs: {
        line: {
          stroke: "#fd6d6f",
          strokeWidth: 1,
        },
      },
    },
    {
      source: "4",
      target: "5",
      attrs: {
        line: {
          stroke: "#fd6d6f",
          strokeWidth: 1,
        },
      },
    },
    {
      source: "4",
      target: "6",
      attrs: {
        line: {
          stroke: "#fd6d6f",
          strokeWidth: 1,
        },
      },
    },
    {
      source: "4",
      target: "7",
      attrs: {
        line: {
          stroke: "#fd6d6f",
          strokeWidth: 1,
        },
      },
    },
    {
      source: "4",
      target: "8",
      attrs: {
        line: {
          stroke: "#fd6d6f",
          strokeWidth: 1,
        },
      },
    },
    {
      source: "5",
      target: "9",
      attrs: {
        line: {
          stroke: "#fd6d6f",
          strokeWidth: 1,
        },
      },
    },
    {
      source: "6",
      target: "10",
      attrs: {
        line: {
          stroke: "#fd6d6f",
          strokeWidth: 1,
        },
      },
    },
    {
      source: "7",
      target: "11",
      attrs: {
        line: {
          stroke: "#fd6d6f",
          strokeWidth: 1,
        },
      },
    },
    {
      source: "8",
      target: "12",
      attrs: {
        line: {
          stroke: "#fd6d6f",
          strokeWidth: 1,
        },
      },
    },
  ]
);

onMounted(() => {
  initGraph();
});

/**
 * 初始化画布数据
 */
const initGraph = () => {
  graph = new Graph({
    container: containerRef.value,
    grid: {
      /**
       * 网格大小 10px
       */
      size: 20,
      /**
       * 渲染网格背景
       */
      visible: true,
    },
    /**
     * 画布支持拖拽
     */
    panning: true,
    /**
     * 对齐线
     */
    snapline: {
      enabled: true,
      tolerance: 10,
    },
  });

  const dagreLayout = new DagreLayout({
    type: "dagre",
    /**
     * 布局的方向
     */
    rankdir: "TB",
    /**
     * 节点对齐方式
     */
    align: "DR",
    /**
     * 层间距（px）
     */
    ranksep: 30,
    /**
     * 节点间距（px）
     */
    nodesep: 30,
    /**
     * 是否保留布局连线的控制点
     */
    controlPoints: true,
  });

  const model = dagreLayout.layout(data);

  graph.fromJSON(model);

  // 设置边的 Router 为 manhattan
  graph.getEdges().forEach((edge) => {
    edge.setRouter("manhattan", {
      startDirections: ["bottom"],
      endDirections: ["top"],
    });
  });
};
</script>


<style scope lang="less">
.container {
  width: 100%;
  height: 100vh;
}
</style>